<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>上海明匠智能图标</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="css/style.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="css/form.css"/>
    <script type='text/javascript' src='js/jquery.min.js'></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>

</head>
<body>
<div class="testing" style="min-width:100%">
    <header class="main">
        <h1 style="text-align:center"><strong>上海明匠智能图表</strong></h1>
    </header>
    <section class="user">
        <div class="profile-img">
            <p><img src="images/mj_logo.png" alt="" height="40" width="40"/> 欢迎来到上海明匠</p>
        </div>
    </section>
</div>
<section class="alert">
    <div class="green green2">
        <p style="text-align:center">请输入相应信息来填写图标</p>
    </div>
</section>
<div class="page-container">
    <div class="container">
        <div class="row">
            <div class="span8 page-content">
                <article class="type-page hentry clearfix">
                    <h1 class="post-title"/>
                    <a href="#">图表的信息</a>
                </article>
                <form id="contact-form" class="row" action="/updateGraph.shtml" method="post">
                    <p class="span6">
                        <input type="varchar" name="action_id" style="display:none"
                               th:value="${actionBean.getAction_id()}"/>
                    </p>

                    <p class="span2">

                    <p for="name" style="margin-bottom:1%;">图表名称 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="action_name" class="required input-xlarge"
                               th:value="${actionBean.getAction_name()}" title="* 请输入图表名称"/>
                    </p>

                    <p class="span2">

                    <p for="message" style="margin-bottom:1%;">图表副标题 </p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="notes" class="span6" rows="6"
                               th:value="${actionBean.getNotes()}"/>
                    </p>
                    <p class="span2">
                        <p for="message" style="margin-bottom:1%;">原始数据表 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="hbase_table_name" required="true" class="required span6" rows="6"
                               th:value="${ruleBean.getHbase_table_name()}" title="* 请输入原始数据表"/>
                    </p>
                    <div class="increased">
                        <p class="span2">
                            <p for="message" style="margin-bottom:1%;color:black;">待分析的字段 <span>*</span> 
                                <a href="javascript:void(0);" class="button blue" style="color:#fff" id="increased">新增</a>
                            </p>
                        </p>
                    </div>
                    <label id="list">
                        <div th:each="map_item : ${ruleColsMap}">
                            <input class="span4" th:value="${map_item.key}"/>
                            <input class="span5" th:value="${map_item.value}"/>
                            <a href="javascript:void(0);" class="button blue cancel" >取消</a>
                        </div>
                        <p class="span6">
                             <input type="varchar" name="cols" style="display:none" class="required span6" rows="6"
                                th:value="${ruleBean.getCols()}" title="* 请输入待分析的字段" id="cols"/>
                        </p>
                    </label>
                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">请选择待分析数据时段 <span>*</span></p>
                        <select name="time_type">
                            <option th:selected="${ruleBean.getTime_type().equals('lastyear')}?'selected'"
                                    value="lastyear">lastyear
                            </option>
                            <option th:selected="${ruleBean.getTime_type().equals('interval')}?'selected'"
                                    value="interval">interval
                            </option>
                            <option th:selected="${ruleBean.getTime_type().equals('lastday')}?'selected'"
                                    value="lastday">lastday
                            </option>
                            <option th:selected="${ruleBean.getTime_type().equals('lastweek')}?'selected'"
                                    value="lastweek">lastweek
                            </option>
                            <option th:selected="${ruleBean.getTime_type().equals('lastmonth')}?'selected'"
                                    value="lastmonth">lastmonth
                            </option>
                        </select>
                    </div>
                    <p class="span2">
                        <p for="message" style="margin-bottom:1%;">间隔时间 </p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="interval_time" class=" span6" rows="6"
                               th:value="${ruleBean.getInterval_time()}"/>
                    </p>
                    <p class="span2">
                        <p for="message" style="margin-bottom:1%;">数据规则语句 <span>*</span></p>
                    </p>
                    <p class="span6">
                        <input type="varchar" name="rule_value" class="required span6" rows="6"
                               th:value="${ruleBean.getRule_value()}" title="* 请输入数据规则语句"/>
                    </p>
                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">图表更新周期 <span>*</span></p>
                        <select name="exec_type">
                            <option th:selected="${actionBean.getExec_type().equals('week')}?'selected'" value="week">
                                week
                            </option>
                            <option th:selected="${actionBean.getExec_type().equals('interval')}?'selected'"
                                    value="interval">interval
                            </option>
                            <option th:selected="${actionBean.getExec_type().equals('everytime')}?'selected'"
                                    value="everytime">everytime
                            </option>
                            <option th:selected="${actionBean.getExec_type().equals('day')}?'selected'" value="day">
                                day
                            </option>
                            <option th:selected="${actionBean.getExec_type().equals('month')}?'selected'" value="month">
                                month
                            </option>
                            <option th:selected="${actionBean.getExec_type().equals('once')}?'selected'" value="once">
                                once
                            </option>
                        </select>
                    </div>
                    <p class="span2">
                        <p for="message" style="margin-bottom:1%;">自定义周期</p>
                    </p>
                    <p class="span6">
                        <input type="int" name="interal_time" class="span6" rows="6"
                               th:value="${actionBean.getInteral_time()}" title="* 请输入自定义间隔时间"/>
                    </p>
                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">请选择图表类型 <span>*</span></p>
                        <select name="graph_type">
                            <option th:selected="${actionBean.getGraph_type().equals('stack')}?'selected'"
                                    value="stack">stack
                            </option>
                            <option th:selected="${actionBean.getGraph_type().equals('pie')}?'selected'" value="pie">
                                pie
                            </option>
                            <option th:selected="${actionBean.getGraph_type().equals('line')}?'selected'" value="line">
                                line
                            </option>
                            <option th:selected="${actionBean.getGraph_type().equals('bar')}?'selected'" value="bar">
                                bar
                            </option>
                        </select>
                    </div>
                    <p class="span2">
                        <p for="message" style="margin-bottom:1%;color:black;">图表数据信息 <span>*</span></p>
                    </p>
                    <label>
                        <div id="information">
                            <input class="span4" id="span1" disabled="true" value="time_key"/>
                            <input class="span5" id="span2" th:value="${graphInfoMap.get('time_key')}"/>
                            <input class="span4" id="span3" disabled="true" value="x_line"/>
                            <input class="span5" id="span4" th:value="${graphInfoMap.get('x_line')}"/>
                            <input class="span4" id="span5" disabled="true" value="groups_by"/>
                            <input class="span5" id="span6" th:value="${graphInfoMap.get('groups_by')}"/>
                            <input class="span4" id="span7" disabled="true" value="value_col"/>
                            <input class="span5" id="span8" th:value="${graphInfoMap.get('value_col')}"/>
                            <input class="span4" id="span9" disabled="true" value="need_to_show_as_chinese"/>
                            <input class="span5" id="span10" th:value="${graphInfoMap.get('need_to_show_as_chinese')}" />
                            <input type="varchar" style="display:none;" name="graph_info" class="required span6"
                                   rows="6" title="* 请输入信息" id="graph_info"/>
                        </div>
                        <p class="span6" style="display:none;">
                            <input type="varchar" name="graph_info" class="required span6" rows="6"
                                   th:value="${actionBean.getGraph_info()}" title="* 请输入信息" id="graph_info"/>
                        </p>
                    </label>
                    <div style="color:red;margin-left:40%;display:none;" id="chart">*请将图表信息填写完整</div>
                    <div class="span6">
                        <p for="name" style="margin-bottom:1%;">图表所属的类别<span>*</span></p>
                        <select name="classification_id">
                            <option th:each="listItem : ${classList}" th:text="${listItem.getClassification_name()}"
                                    th:selected="${actionBean.getClassification_id()==listItem.getClassification_id()}?'selected'"
                                    th:value="${listItem.getClassification_id()}"></option>
                        </select>
                    </div>
                    <p class="span6 offset2 bm30" style="display:block">
                        <input type="submit" name="submit" value="提交" class="btn btn-inverse buon" id="refer"/>
                    </p>

                    <p class="span6 offset2 bm30" style="display:block">
                        <input type="button" onclick="javascript:history.back(-1)"
                               style="float:right; text-align:center" value="取消" class="btn btn-inverse buon"/>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#contact-form").validate({meta: "validate"});
    });

</script>
<script type="text/javascript" src="js/submit.js"></script>
</body>
</html>